<template>
	<view class="page">
		<accountHeader title="钥匙详情" jumpTo="/pages/smartKey/myKeys"></accountHeader>
		<view class="page-top">
			<u-icon name="list" :src="imgUrl + detail.rechargeImage" width="300px" height="150px"></u-icon>
		</view>
		<view class="page-main">
			<view class="line-layout">
				<p>品牌</p>
				<p>{{detail.vehicleBrand}}</p>
			</view>
			<view class="line-layout">
				<p>车型</p>
				<p>{{detail.vehicleModel}}</p>
			</view>
			<view class="line-layout">
				<p>车架号</p>
				<p>{{detail.engineNumber}}</p>
			</view>
			<view class="line-layout" @click="authorizationPage()">
				<p>授权信息</p>
				<view class="flex">
					<p>已授权{{detail.authorizedQuantity}}个用户</p>
					<u-icon name="arrow-right" size="40"></u-icon>
				</view>
			</view>
			<view class="line-layout">
				<p>设为默认钥匙</p>
				<u-switch v-model="checked" size="40" @click="setDef(this.detail.id)"></u-switch>
			</view>
			<u-button class="Btn" @click="modalShow = true">注销钥匙</u-button>
		</view>
		<u-modal :show="modalShow" @cancel="modalShow = false" @confirm="confirm" title="注销钥匙" content='确认注销' showCancelButton></u-modal>
		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import accountHeader from "@/components/acountHeader.vue"
	import {setDefault,cancelkey} from '@/config/api/carKeys.js'
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				checked:false,
				modalShow:false,
				detail:'',
				imgUrl:uni.$u.http.config.baseURL,
			}
		},
		methods:{
			authorizationPage(id){
				uni.navigateTo({url: `/pages/smartKey/authorization?keyId=${this.detail.id}`})
			},
			confirm(){
				this.modalShow = false
				cancelkey(this.detail.id).then(res => {
					if(res.code==200){
						uni.navigateTo({
							url:'/pages/smartKey/myKeys'
						})
					}
				})
			},
			setDef(id){
				if(this.checked){
					setDefault({id}).then((res)=>{
						if(!res){
							this.checked=false
							this.$refs.uToasts.show({
								message:"该钥匙不属于该用户！"
							})
						}else{
							this.checked=true
							this.$refs.uToasts.show({
								message:"设置默认钥匙成功"
							})
						}
					})
				}
			}
		},
		onLoad(e){
			console.log(JSON.parse(decodeURIComponent(e.data)));
			this.detail = JSON.parse(decodeURIComponent(e.data))	
		}
	}
</script>

<style scoped>
	/* 页面 */
	.page{
		padding:5%;
	}

	/* 页面头部 */
	.page-top{
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}

	/* 带下划线的列表样式 */
	.line-layout{
		display: flex;
		justify-content: space-between;
		padding-bottom: 10px;
		margin-top: 15px;
		border-bottom: 1px solid gainsboro;
	}

	/* 按钮样式 */
	.Btn{
		padding: 50rpx 0;
		margin-top: 40px;
		border-radius: 100rpx;
		font-size: 40rpx;
		background-color: #555555;
		color: white;
	}
</style>
